<template>
	<!-- 我的页面我的页面我的页面我的页面我的页面我的页面我的页面我的页面我的页面我的页面我的页面我的页面我的页面 -->
	<view class="wrap" style="background-color: #FFFFFF;">
		<view style="position: absolute;width: 100%;height: 100rpx;">
			
			<!-- 以下代码不要删除  后续需要该功能呢即打开 -->
			<view class="notice" v-if="noticeList.length && user_type=='自然人'" style="background-color:transparent;padding-left:30rpx;">
				<view style="position: absolute;top: 22rpx;">
					<image style="width: 50rpx;height: 50rpx;" src="../../static/gonggao.png" mode=""></image>
				</view>
				<!-- @touchmove.stop='stopTouchMove' -->
				<!-- 公告轮播区域 -->
				<swiper class="swiper-nav" 
				:circular="true" 
				:vertical="vertical" 
				:autoplay="true" 
				:interval="interval" 
				:duration="duration" 
				style="  height: 100rpx;">
				
				
					<swiper-item style="display: table;" 
					
					v-for="(item,index) in noticeList" 
					:key="index">
					
					<view style="width: 100%;height: 100rpx;display: table-cell;vertical-align: middle;margin-left: 30rpx;
					" 
					class=" cfff f28 tel fontWeight white" ><text style="display: block;margin-left: 60rpx;">{{item.rank}}</text></view>					
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="head p_r" style="">
			<uni-transition :duration="1000" :mode-class="'slide-top'" :styles="transfromClass" :show="topShow">
			<view class="flex flex-pack-justify user-info" style="">
				<!-- <view style="border: 1px solid red;width: 100rpx;height: 100rpx;position: absolute;top: 70rpx;left: 80rpx;">  暂时不要删除 待后台接口   打开
					
				</view> -->
				<view class="template-image">
					<view class="portrait">
						<image class="avatar" style="width: 100%;height: 100%;" v-if="avatarUrl" :src="avatarUrl"></image>
					</view>
					<!-- 联络人不显示黄冠 -->
					<view v-if="user_type==='联络人'" class="title-avatar" style="margin-top: -60rpx;margin-left:25rpx;">
						<img   src="" alt="">
					</view>
					<!-- 自然人鱼法人显示黄冠 -->
					<view v-else  class="title-avatar " :class="[tiaraNumber==null?'marginLeft40':'marginLeft25']" style="margin-top: -60rpx;">
						<view class="">
							<img v-if="tiaraNumber==1"  src="./static/first.png" alt="">
							<img v-if="tiaraNumber==2"  src="./static/two.png" alt="">
							<img v-if="tiaraNumber==3"  src="./static/three.png" alt="">
						</view>
					</view>
				</view>
				<view class="flex-1 con" style="width: 100%;margin-left: 80rpx;">
					<view class="flex flex-pack-justify Jbetween" v-if="userInfo">
						<text class="cfff f28 tel fontWeight white">{{ userInfo.phone?userInfo.phone:'暂无电话' }}</text>
						<text v-if="user_type === '自然人' || user_type === '法人'"  class="cfff f28 tel fontWeight white" @click="urlScore">当前积分: {{score_sum || 0}} 分</text>
					</view>
					<view class="position">
						<text class="te_c cfff f24 text20 white">{{ user_type?user_type:'' }}</text>
					</view>
					<view class="flex flex-pack-justify flex-align-center info Jbetween">
						<view v-if="userInfo">
							<view v-if="user_type === '自然人' || user_type === '法人'" class="flex flex-align-center tel-info cfff f24" style="margin-bottom: 20rpx" @click="makePhoneCallChange">
								<text class="text22 white">联络人</text>
								<text class="text22 white">{{ userInfo.liaison_phone?userInfo.liaison_phone:'暂无电话' }}</text>
								<image src="../../static/tel1-min.png"></image>
							</view>
							<view class="flex flex-align-center tel-info cfff f24 Acenter" @click="makePhoneCallAdmin">
								<text class="text22 white">管理员</text>
								<text class="text22 white">010-85166153</text>
								<image src="../../static/tel1-min.png"></image>
							</view>
						</view>
						<view  class="f26 bgfff te_c  back text-center fontWeight" @click="urlUpload" style="width: 200rpx;border-radius: 100rpx 100rpx 100rpx 100rpx;height: 68rpx;line-height: 68rpx;"><text class=" textColor ">签署合同</text></view>
					</view>
				</view>
			</view>
			</uni-transition>
		</view>
		<view class="back" style="border-radius: 50rpx 50rpx 0px 0px;margin-top: -48rpx;">
			<view class="p_r content bgfff">
				<uni-transition :duration="1000" :mode-class="'slide-right'" :styles="transfromClass" :show="topShow">
					<view class="flex flex-pack-justify">
						<view style="margin-right: 20rpx; height: 150rpx;" class="item book flex flex-pack-justify flex-align-center Acenter Jbetween" @click="urlDetail('../library/waterfall/index?id='+id+'&user_type='+user_type)">
							<view class="flex-1 cfff">
								<text class="white" style="font-size: 27rpx; margin-bottom: 10rpx;font-weight: bold;">历史记账</text>
								<text class="f24 num white">查看详情</text>
							</view>
							<view style="margin-left: 10rpx; margin-top: 50rpx">
								<image style="width: 56rpx; height: 57rpx" src="../../static/book-min.png"></image>
							</view>
						</view>
						<view style="margin-right: 20rpx; height: 150rpx" class="item research flex flex-pack-justify flex-align-center Acenter Jbetween" @click="urlDetail('../componentsB/sticky/index')">
							<view class="flex-1 cfff">
								<text class="f32 txt white" style="font-size: 27rpx; margin-bottom: 10rpx">历史调研</text>
								<text class="f24 num white">查看详情</text>
							</view>
							<view style="margin-left: 10rpx; margin-top: 50rpx">
								<image style="width: 50rpx; height: 50rpx" src="../../static/research-min.png"></image>
							</view>
						</view>
						<view style="height: 150rpx" class="item three flex flex-pack-justify flex-align-center Acenter Jbetween" @click="urlDetail('../componentsB/skeleton/index')">
							<view class="flex-1 cfff" style="display: flex; flex-direction: column">
								<text class="f32 txt white" style="font-size: 27rpx; margin-bottom: 10rpx">服务汇总</text>
								<text class="f24 num white">查看详情</text>
							</view>
							<view style="margin-left: 10rpx; margin-top: 50rpx;margin-right: -10rpx;">
								<image style="width: 70rpx; height: 80rpx" src="../../static/total-min.png"></image>
							</view>
						</view>
					</view>
				</uni-transition>
				<uni-transition :duration="2100" :mode-class="'slide-left'" :styles="transfromClass" :show="topShow">
					<view class="flex flex-pack-justify">
						<view   style="margin-right: 20rpx; height: 150rpx;"  class="  item question flex flex-pack-justify flex-align-center Acenter Jbetween"  @click="urlDetail('../componentsC/collapse/index?title=常见问题')">
							<view class="flex-1 cfff">
								<text class="white" style="font-size: 27rpx; margin-bottom: 10rpx;font-weight: bold;">常见问题</text>
								<text class="f24 num white">查看详情</text>
							</view>
							<view style="margin-left: 10rpx; margin-top: 50rpx">
								<image style="width: 56rpx; height: 57rpx" src="../../static/book-min.png"></image>
							</view>
						</view>
						<view style="margin-right: 20rpx; height: 150rpx" class="item suggest flex flex-pack-justify flex-align-center Acenter Jbetween" @click="urlDetail('../componentsC/test/index')">
							<view class="flex-1 cfff">
								<text class="f32 txt white" style="font-size: 27rpx; margin-bottom: 10rpx">意见反馈</text>
								<text class="f24 num white">查看详情</text>
							</view>
							<view style="margin-left: 10rpx; margin-top: 50rpx">
								<image style="width: 50rpx; height: 50rpx" src="../../static/research-min.png"></image>
							</view>
						</view>
						<view style="height: 150rpx" class="item gui flex flex-pack-justify flex-align-center Acenter Jbetween" @click="urlDetail('../componentsC/collapse/index?title=操作手册')">
							<view class="flex-1 cfff" style="display: flex; flex-direction: column">
								<text class="f32 txt white" style="font-size: 27rpx; margin-bottom: 10rpx">操作手册</text>
								<text class="f24 num white">查看详情</text>
							</view>
							<view style="margin-left: 10rpx; margin-top: 50rpx;margin-right: -10rpx;">
								<image style="width: 70rpx; height: 80rpx" src="../../static/total-min.png"></image>
							</view>
						</view>
					</view>
				</uni-transition>
			</view>
		</view>
			<!-- 签署合同方式弹窗 -->
		<u-popup v-model="isShow" @close="isClose" closeable mode="bottom" :borderRadius="10" >
			<view style="padding: 80rpx 30rpx 30rpx 30rpx ;">
				<view class="fontWeight text34" style="margin-bottom: 30rpx;text-align: center;color: #666666;">合同签署方式(任选其一，如乙方无法签字请选择纸质合同签署)</view>
				 <button :loading="loading" type="default" style="margin-bottom: 30rpx; background: linear-gradient(159deg, #80e6fc 0%, #0051ff 99%);border-radius: 10rpx;width: 100%;height: 70rpx;line-height: 70rpx;font-size: 30rpx;color: #FFFFFF;" @click="clickAffix(1)">纸质合同签署</button>
				 <button v-if="user_type==='自然人'" :loading="loading" type="default" style="background: linear-gradient(159deg, #80e6fc 0%, #0051ff 99%);border-radius: 10rpx;width:100%;height: 70rpx;line-height: 70rpx;font-size: 30rpx;color: #FFFFFF;" @click="clickAffix(2)">电子合同签署</button>
			</view>
		</u-popup>
		<u-tabbar
		    v-model="current"
		    :show="vuex_show"
		    :bg-color="vuex_bgColor"
		    :border-top="vuex_borderTop"
		    :list="vuex_tabbar"
			:mid-button="vuex_midButton"
			:inactive-color="vuex_inactiveColor"
			:activeColor="vuex_activeColor "
			@change="tabbarChange()"
		></u-tabbar>
	</view>
</template> 





<script>
	const app=getApp()//获取公共参数
	 var timer = null ; //创建一个定时器
	export default {
		data() {
			return {
				transfromClass: {
					// position: 'fixed',
					// bottom: 0,
					// top: 0,
					// left: 0,
					// right: 0,
					// display: 'flex',
					// 'justify-content':'center',
					// 'align-items': 'center'
				},
				topShow:false,
				topShow1:false,
				vertical:false,//false=横向滚动   /   true=横向滚动
				interval:2000,//自动切换时间间隔
				duration:1000,//滑动动画时长
				noticeList:[],
				score_sum:0,//当前积分
				loading:false,//按钮加载
				isShow:false,//是否显示签署合同弹窗
				current:2,
				dataIndex: false,
				defaultSelector: [0],
				// 月份范围
				range: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true,
					province: true,
					city: true,
					area: true,
					timestamp: true
				},
				business_specific_type: 15, //法人记账指标类型  1 旅行社记账  2  景区记账  3  酒店记账  4  新业态记账  5  乡村民宿记账  6 乡村农家乐记账  7  乡村餐馆记账
				// 缓存获取用户信息 
				userInfo: {
				    phone: ''
				},
				// 类型人
				user_type: {},
				// 用户头像相关信息
				avatarUrl: '',

				// 是否显示协议弹窗
				isMyShow: false,
				// 是否显示月份弹窗
				showPicker: false,
				// 选中的月份
				value: '',
				// 传递的month
				month: '',
				// 用户id
				id:'',
				// 自然人法人条件下是否开启记账功能//只有自然人会有是否记账功能  法人联络人都没有
				bookkeeping:0,
				isAuto:false,
				tabIndex:0,//默认跳转记账页
				business_type:"",//业务具体类型
				tiaraNumber:1,//黄冠类型
			}
		},
		
		/*下拉刷新*/
		onPullDownRefresh: function() {
			setTimeout(() => {
				//关闭下拉刷新
				uni.stopPullDownRefresh()
			}, 500)
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function (options) {
			this.topShow=true
			let tabIndex=uni.getStorageSync('tabIndex')
			if(tabIndex){
				this.tabIndex=tabIndex
			}
			this.current=2
		    // 获取当前月份
		    let d = new Date();
		    let month = d.getMonth();
		
		    if (month < 10) {
				this.month='0' + month,
				this.value= month
		    } else {
				this.month= month,
				this.value= month
		    } // 获取缓存的用户相关信息
		
		    let userInfo = uni.getStorageSync('userInfo');
		    let avatarUserInfo = uni.getStorageSync('avatarUserInfo');
			this.avatarUrl=avatarUserInfo.avatarUrl
			console.log('获取头像信息’',this.avatarUrl)
		    if (userInfo) {
				this.userInfo=userInfo[0],
				this.id=userInfo[0].id
				this.user_type=userInfo.user_type,
				this.bookkeeping=this.userInfo.bookkeeping?this.userInfo.bookkeeping:0//自然人条件下是否有记账
				this.avatarUserInfo=avatarUserInfo
				this.business_specific_type = userInfo[0].business_specific_type
				this.business_type=userInfo[0].business_type
		    } 
			
		},
	   onHide: function () {
		   console.log('页面隐藏1',this.topShow);
		   this.topShow=false
			 console.log('页面隐藏2',this.topShow);
		},
		onShow: function () {
		    this.topShow=true
			let tabIndex=uni.getStorageSync('tabIndex')
			if(tabIndex){
				this.tabIndex=tabIndex
			}
			console.log('渲染积分',this.score_sum,app.globalData.score_num)
			this.isShow=false//关闭签署弹窗
			this.loading=false
			// 重新重置底部导航栏选中背景颜色
			if(this.dataIndex==true){
				this.current=1
			}else{
				this.current=2
			}
		    uni.showToast({
		        title: '加载中...',
		        icon: 'loading',
		        duration: 1000
		    }); 
		    let phone = uni.getStorageSync('phone');
			this.login(phone)
			
			// 获取当前积分前三名数据
			this.getNoticeList()
			// 获取当前黄冠排名
			this.getRandingData()
		},
		onUnload() {
		      // 页面关闭后清空数据
		},
		methods: {
			// 获取当前黄冠排名
			getRandingData:function(){
				var _self=this
				uni.request({
				    method: 'POST',
				    url: 'https://jizhang.xqyu.cn/index.php/api/index/my_ranking',
				    dataType: 'json',
				    header: {
				        'content-type': 'application/x-www-form-urlencoded'
				    },
				    data: {
						user_id:_self.id
				    },
				    success: function (res) {
						console.log('获取自然人黄冠数据',res)
						if(res.data.code==1){
							console.log('黄冠数据',res.data.data)
							// 黄冠级别
							if(res.data.data==1 || res.data.data==2 || res.data.data==3){// 有黄冠排名
								_self.tiaraNumber=res.data.data
							}else{
								// 没有黄冠排名
								_self.tiaraNumber=null
							}
						}else{
							_self.$.toast(res.data.msg)
						}
				    },
				    fail: function (err) {
				      console.log('失败了',err)
					  _self.toast(res.data.msg)
				    }
				});
			},
			// 获取积分前三
			getNoticeList:function(){
				var _self=this
				uni.request({
				    method: 'POST',
				    url: 'https://jizhang.xqyu.cn/index.php/api/index/three_ranking',
				    dataType: 'json',
				    header: {
				        'content-type': 'application/x-www-form-urlencoded'
				    },
				    data: {
				    },
				    success: function (res) {
						console.log('获取我的页面积分前三数据',res.data.data)
						if(res.data.code==1){
							let data=res.data.data
							let arr=[]
							arr.push(data[0],data[1],data[2])
							arr.forEach((item, index)=>{
								_self.$set(item, 'rank',item.num)
								console.log('下标',index)
								if(index==0){
									console.log('item.rank',item.rank) 
									item.rank="第一名: "+item.name+ "      总积分： "+item.num+" 分"
								}else if(index==1){
									item.rank="第二名: "+item.name+ "      总积分： "+item.num+" 分"
								}else{
									item.rank="第三名: "+item.name+ "       总积分： "+item.num+" 分"
								}
								
							})
							_self.noticeList=arr
						}else{
							_self.toast(res.data.msg)
						}
				       
				    },
				    fail: function (err) {
				      console.log('失败了',err)
					  _self.toast(res.data.msg)
				    }
				});
			},
			// 开始登录
			login: function (phone) {
				var _self=this
			    uni.request({
			        method: 'POST',
			        url: 'https://jizhang.xqyu.cn/index.php/api/index/login',
			        dataType: 'json',
			        header: {
			            'content-type': 'application/x-www-form-urlencoded'
			        },
			        data: {
			            phone: phone
			        },
			        success: function (res) {
			            if (res.data.code == 1) {
							_self.score_sum=res.data.data[0].score_sum
			            } else {
			               
			            }
			        },
			        fail: function (err) {
			          
			        }
			    });
			},
		    // 当前积分详情跳转事件
			urlScore:function(){
				uni.navigateTo({
					url:'../componentsC/score/index'
				})
			},
			// 签署合同跳转事件
			urlUpload:function(){
				console.log('获取类型',this.user_type)
			  if(this.user_type !='自然人'){
				  console.log('走跳钻了')
				  uni.navigateTo({
				  	url:'../componentsB/upload/index?isType='+1
				  })
			  }else{
				  console.log('走签署合同弹窗了',this.isShow)
			  	 this.isShow=true//签署合同弹窗打开
			  }
			},
			// 关闭签署合同弹窗方式
			isClose:function(){
				this.isShow=false//关闭签署合同弹窗
			},
		   // 签署按钮跳转事件
			clickAffix:function(e){
				uni.navigateTo({
					url:'../componentsB/upload/index?isType='+e
				})
			},
		
			// 底部导航栏切换事件
			tabbarChange(event){
				this.dataIndex=false
				this.current=2
				if (event == 0) {  //跳转首页
					uni.switchTab({
						url: './components'
					})
				} else if (event == 1) { //如果点击中间图标  跳转添加记账页   对应跳转页面
					if(this.user_type==="自然人"){
						if(this.bookkeeping=== "是"){
							console.log('可以跳转了')
							if(this.tabIndex==0){//点击的是实时记账 点击加号跳转实时记账
								uni.navigateTo({//跳转自然人记账页面
									url:"../library/home/index"
								})
							}else{//否则跳转一次性记账
								uni.navigateTo({//跳转自然人记账页面
									url:"../componentsA/parse/index"
								})
							}
						
						}else{
							// 说明没有几张功能  禁止继续执行  否则向下执行
							this.$.toast('暂未开启记账功能,请联系管理员')
							return
						}
					}else{
						this.dataIndex = true
						if (this.user_type === '联络人') { //联络人
							uni.navigateTo({
								url: './js' //联络人记账页面
							})
						} else if (this.user_type === '自然人') { //自然人
							uni.navigateTo({
								url:"../library/home/index"
							})
						} else { //法人
							let obj={
								clickType:'add'
							}
							if(this.business_type==1 || this.business_type==2 || this.business_type==3 || this.business_type==4 || this.business_type==5){
								if(this.business_specific_type==1 || this.business_specific_type==2  || this.business_specific_type==3){
									uni.navigateTo({
										url: "../template/hotel/index?item="+JSON.stringify(obj)
									})//酒店记账跳转
								}else if(this.business_specific_type==4 || this.business_specific_type==5 || this.business_specific_type==6){//景区记账
									uni.navigateTo({
										url: "../template/parkLand/index?item="+JSON.stringify(obj)
										})
								}else if(this.business_specific_type==7 || this.business_specific_type==8){
										uni.navigateTo({
											url: "../template/travel/index?item="+JSON.stringify(obj)
										})//旅行社记账跳转
								}else if(this.business_specific_type==9 || this.business_specific_type==10  || this.business_specific_type==11 || this.business_specific_type==12){
									uni.navigateTo({
										url: "../library/debounce/index?item="+JSON.stringify(obj)
									})
								}else if(this.business_specific_type==13){
									uni.navigateTo({
										url: "../library/deepClone/index?item="+JSON.stringify(obj)
									})
								}else if(this.business_specific_type==14){
									uni.navigateTo({
										url: "../template/countrySmile/countrySmile?item="+JSON.stringify(obj)
									})
								}else if(this.business_specific_type==15){
									uni.navigateTo({
										url: "../template/country/index?item="+JSON.stringify(obj)
									})
								} 
							}else {
								this.$.toast('未开通记账功能')
							}
						}
					}
				}else{//跳转我的页面
					uni.switchTab({
						url: './template'
					})
				}
			},
			// 获取法人自然的指标信息
			getIndexInfo: function () {
			    var that = this;
			    uni.request({
			        method: 'POST',
			        url: 'https://jizhang.xqyu.cn/index.php/api/index/get_index_info',
			        dataType: 'json',
			        header: {
			            'content-type': 'application/x-www-form-urlencoded'
			        },
			        data: {
			            uid: that.userInfo.id,
			            user_type: that.user_type,
			            month: that.month
			        },
			        success: function (res) {
						// 数据加载完成，隐藏弹窗
						uni.hideLoading();
			        }
			    });
			},
			// 月份选择
			bindPickerChange: function (e) {
				// 显示月份选择弹窗
			    this.showPicker=true
			},
			// picker选择器确定
			onConfirmPicker: function (event) {
				let index=event[0]
			    // 关闭弹窗
				this.showPicker=false,
				this.value=this.range[index]
				// 月份格式化
				if(this.value>0 && this.value <10){
					this.month='0'+this.value
				}else{
					this.month=this.value
				}
				//    // 每次选择调用一次查询请求传递月份参数
				this.getIndexInfo();
			},
			// picker选择器改变
			onChangePicker: function (value) {
			    if (value.detail.value < 10) {
			        this.month= '0' + value.detail.value
			    } else {
			        this.month=value.detail.value
			    }
			},
			// 模块跳转
			urlDetail:function(url){
				uni.navigateTo({
					url:url
				})
			},
			// 点击法人或自然人手机号事件
			makePhoneCallChange() {
			    var _self = this;
			    uni.makePhoneCall({
			        phoneNumber: _self.userInfo.liaison_phone
			    });
			},
			// 管理员手机号点击事件
			makePhoneCallAdmin() {
			    var _self = this;
			    uni.makePhoneCall({
			        phoneNumber: '010-85166153'
			    });
			}
		}
	} 
</script>

<style>
	/* page {
		background-color: rgb(240, 242, 244);
	} */
</style>

<style lang="scss" scoped>
	// 设置图表的宽高
	.uni-ec-canvas {
		width: 680rpx;
		height: 660rpx;
		display: block;
		margin-bottom: 115rpx;
	}
	.u-cell-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}
	page {
	    overflow-x: hidden;
	}
	.head {
	    height: 450rpx;
	    padding: 135rpx 20rpx 0 20rpx;
	    z-index: 1;
	    background: linear-gradient(to bottom right, #20d5fd, #0657c8);
	}
	.user-info {
	    // margin-top: 40rpx;
		display: flex;
	}
	
	.user-info .template-image .portrait {
	    width: 155rpx;
	    height: 155rpx;
	    // overflow: hidden;
	    border-radius: 50%;
	    border: 2px #fff solid;
	    margin-right: 20rpx;
		position: absolute;
	}
	.user-info  .template-image .portrait .avatar{
	    width: 124rpx;
	    height: 124rpx;
		border-radius: 50%;
		
	}
	.user-info  .template-image .title-avatar{
	}
	.marginLeft25{
		margin-left: 25rpx;
	}
	.marginLeft40{
		margin-left: 120rpx;
	}
	.user-info  .template-image .title-avatar img{
		width: 100rpx;
		height: 80rpx;
		position: relative;
		// margin-top: -160rpx;
		// margin-left: 30rpx;
	}
	.user-info .con {
	    padding-top: 30rpx;
	}
	.user-info .tel {
	    font-weight: bold;
	}
	.user-info .message text {
	    position: absolute;
	    left: 0;
	    top: 0;
	    width: 10rpx;
	    height: 10rpx;
	    border-radius: 50%;
	}
	.user-info .message image {
	    width: 34rpx;
	    height: 32rpx;
	}
	.user-info .position {
	    margin-top: 10rpx;
	}
	.user-info .position text {
	    background-color: rgba(255, 255, 255, 0.264);
	    border-radius: 20rpx;
	    padding: 5rpx 30rpx;
	}
	.user-info .info {
	    margin-top: 30rpx;
	}
	.user-info .info navigator {
	    color: #1d69fc;
	    font-weight: bold;
	    width: 200rpx;
	    height: 70rpx;
	    line-height: 70rpx;
	    border-radius: 35rpx;
	}
	.user-info .info .tel-info {
	    margin-bottom: 20rpx;
	}
	.user-info .info .tel-info image {
	    width: 20rpx;
	    height: 19rpx;
	}
	.user-info .info .tel-info text {
	    margin-right: 20rpx;
	}
	
	.content {
	    border-radius: 30rpx 30rpx 0 0;
	    padding: 20rpx;
	    min-height: 63vh;
	    z-index: 9;
	}
	.content .item {
	    width: calc(49% - 40rpx);
	    border-radius: 20rpx;
	    height: 140rpx;
	    padding: 0 20rpx;
	    margin-top: 20rpx;
	}
	.content .book {
	    background: linear-gradient(to bottom right, #ff9f10, #ff5c01);
	}
	.content .book image {
	    width: 72rpx;
	    height: 72rpx;
	    display: block;
	}
	.content .item text {
	    display: block;
	}
	.content .item .txt {
	    font-weight: bold;
	}
	.content .research {
	    background: linear-gradient(to bottom right, #05b0ed, #17dcba);
	}
	.content .research image {
	    width: 56rpx;
	    height: 57rpx;
	}
	.content .three {
	    background: linear-gradient(180deg, #02a8f5 0%, #1d91fc 100%);
	}
	.content .question{
		background: linear-gradient(180deg,  #e99bfc 0%, #b560ff 100%);
	}
	.content .suggest {
		background: linear-gradient(180deg, #fc7066 0%, #ff4242 100%);
	}
	.content .protocol {
		background: linear-gradient(180deg, #84aa80 0%, #009900 100%);
	}
	.content .gui {
		background: linear-gradient(180deg,   #DE8B15 0%,#00B26A 100%); 
	}
	.agreement {
	    color: #1c44e8;
	    text-decoration: underline;
	    width: 100%;
	    bottom: 50rpx;
	}
	.chart image {
	    width: 40% !important;
	    height: 60rpx !important;
	}
	.chart {
	    margin-top: 50rpx;
	}
	.chart text {
	    font-weight: bold;
	}
	.date-select {
	    display: flex;
	    align-items: center;
	    color: #666;
	    padding: 0 15rpx;
	    font-size: 24rpx;
	    height: 100%;
	    line-height: 46rpx;
	    background-color: #eee;
	    border-radius: 4rpx;
	}
	.date-text {
	    width: 85rpx;
	    overflow: hidden;
	}
	.chart-wrap {
	    height: 360rpx;
	}
	.chart-wrap ec-canvas {
	    width: 100%;
	    height: 100%;
	}
	
	.slide-box{
		margin: 0 auto;
		width:800px;
		height:35px;
		overflow:hidden;
	}
	.slide-box-inner{
		width:3600px;
		height:35px;
	}
	.slide-content,.slide-copy{
		float:left;
		height:35px;
	}
	.slide-content a,.slide-copy a{
		display:block;
		width:600px;
		height:35px;
		text-align:center;
		line-height:35px;
		color:#000;
		text-decoration:none;
		float:left
	}
	
</style>